<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader />
      <TodoList />
      <TodoFooter />
    </div>
  </div>
</template>

<script>
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";

import storageUtils from "./util/storageUtils";

export default {

  mounted() {
    // 发送命令：异步获取保存的todos数据并显示
    this.$store.dispatch([`reqTodos`])
  },

  /*watch: { // 监视
    todos: {
      deep: true,  // 深度监视
      handler: function (value){
        // 将todos最新的值的JSON数据，保存到localStorage
        window.localStorage.setItem('todos_key', JSON.stringify(value))
      }
    }
  },*/

  components: {
    TodoHeader,
    TodoList,
    TodoFooter
  }
}
</script>

<style>
.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
